// 有一个属性叫做feature，可以直接传入一个数组，这些数组内容是一个个容器，专门用来包裹子元素。
// 内置功能可以用字符串？
// 还可以添加全局变量？希望省去写全局变量类型的麻烦，支持异步全局变量？

import type { CommonContainerProps } from "@components/common/types";

// features 数组越前,则被包裹的越深
export function Frame({ features, children, asElemnt = 'div' }: CommonContainerProps & { features?: any[] }) {
    const Component = asElemnt;
    if(!features){
        return <Component>{children}</Component>;
    }
    let wrappedChildren = children;

    for(const Feature of features){
        if (typeof Feature !== 'function') {
            continue;
        }
        const result = Feature({ children: wrappedChildren });
        if (result && typeof result === 'object' && ('$$typeof' in result)) {
            wrappedChildren = result;
        }
    }
    return <Component>{wrappedChildren}</Component>;
}